<template>
    <div class="cloud-wrap">
        <div :id="id" :class="className" :style="{ height:height,width:width }" />
    </div>
</template>

<script>
    import "echarts-wordcloud/dist/echarts-wordcloud"
    import "echarts-wordcloud/dist/echarts-wordcloud.min";
    export default {
        name: "wordCloudChart",
        components: {},
        props: {
            className: {
                type: String,
                default: "chart"
            },
            id: {
                type: String,
                default: "chart"
            },
            width: {
                type: String,
                default: "100%"
            },
            height: {
                type: String,
                default: "200px"
            },
            title: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                chart: null,
                ciYunData: [

                    {
                        name: "武行",
                        value: 15000
                    },
                    {
                        name: "前景",
                        value: 10081
                    },
                    {
                        name: "特约",
                        value: 9386
                    },
                    {
                        name: "悍匪",
                        value: 7500
                    },
                    {
                        name: "军人",
                        value: 7500
                    },
                    {
                        name: "弟子",
                        value: 6500
                    },
                    {
                        name: "男兵",
                        value: 6520
                    },
                    {
                        name: "手替",
                        value: 6000
                    },
                    {
                        name: "城防兵",
                        value: 4550
                    },
                    {
                        name: "各国使臣",
                        value: 3800
                    },
                    {
                        name: "行商",
                        value: 3000
                    },
                    {
                        name: "女眷",
                        value: 2500
                    },
                    {
                        name: "家丁",
                        value: 2300
                    },
                    {
                        name: "丫鬟",
                        value: 2000
                    },
                    {
                        name: "婆子",
                        value: 1900
                    },
                    {
                        name: "书童",
                        value: 1800
                    },
                    {
                        name: "男学徒",
                        value: 1700
                    },
                    {
                        name: "后厨",
                        value: 1600
                    },
                    {
                        name: "小孩",
                        value: 1500
                    },
                    {
                        name: "男兽族",
                        value: 1200
                    },
                    {
                        name: "女兽族",
                        value: 1100
                    },
                    {
                        name: "老板娘",
                        value: 1110
                    },
                    {
                        name: "随从太监",
                        value: 1120
                    },
                    {
                        name: "嬷嬷",
                        value: 700
                    },
                    {
                        name: "狱警",
                        value: 600
                    },
                    {
                        name: "巡捕",
                        value: 500
                    },
                    {
                        name: "毛笔字手替",
                        value: 500
                    },
                    {
                        name: "师爷",
                        value: 400
                    },
                    {
                        name: "文替",
                        value: 400
                    },
                    {
                        name: "武替",
                        value: 400
                    },
                    {
                        name: "侍卫",
                        value: 400
                    },
                    {
                        name: "车夫",
                        value: 400
                    },
                    {
                        name: "老伯",
                        value: 400
                    },
                    {
                        name: "伙计小贩",
                        value: 400
                    }
                ]
            };
        },
        mounted() {
            this.initChart();
        },
        beforeDestroy() {
            if (!this.chart) {
                return;
            }
            this.chart.dispose();
            this.chart = null;
        },
        methods: {
            initChart() {
                this.chart = this.$echarts.init(document.getElementById(this.id));
                const option = {
                    title: {
                        text: this.title,
                        x: "center"
                    },
                    backgroundColor: "",
                    series: [
                        {
                            type: "wordCloud",
                            //用来调整词之间的距离
                            gridSize: 10,
                            //用来调整字的大小范围
                            sizeRange: [14, 40],
                            //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
                            // rotationRange: [-45, 0, 45, 90],
                            // rotationRange: [ 0,90],
                            rotationRange: [0, 0],
                            //随机生成字体颜色
                            // maskImage: maskImage,
                            textStyle: {
                                color: function() {
                                    return 'rgb(' + [
                                        Math.round(Math.random() * 255),
                                        Math.round(Math.random() * 255),
                                        Math.round(Math.random() * 255)
                                    ].join(',') + ')';
                                }
                            },
                            //位置相关设置
                            // Default to be put in the center and has 75% x 80% size.
                            left: "center",
                            top: "center",
                            right: null,
                            bottom: null,
                            width: "200%",
                            height: "200%",
                            //数据
                            data: this.ciYunData
                        }
                    ]
                };
                this.chart.setOption(option);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .cloud-wrap {
        width: 490px;
        height: 366px;
        text-align: left;
        .cloud-box {
            width: 100%;
            height: 100%;
        }
    }
</style>
